<template>
  <view class="list-item" @click="handleItem">
    <view class="title">
      {{ title }}
      <slot name="left" />
    </view>
    <view class="right">
      {{ right }}
      <slot name="right" />
    </view>
    <view class="desc">
      {{ desc }}
      <slot name="desc" />
    </view>
  </view>
</template>

<script setup>
const props = defineProps({
  title: {
    type: String,
    default: ''
  },
  right: {
    type: String,
    default: ''
  },
  desc: {
    type: String,
    default: ''
  }
})
const emit = defineEmits(['click'])
const handleItem = () => {
  console.log('click')
  emit('click')
}
</script>

<style scoped lang="scss">
.list-item{display: flex;justify-content: space-between;flex-wrap: wrap;padding: 10px 20px;border-bottom: 1px solid #eee;}
.title{width: calc(100% - 100px);}
.right{max-width: 100px;text-align: right;}
.desc{width:100%;margin: 10px 0 0;font-size: 12px;color: #999;}
</style>
